<template>
  <div class="book-item" v-if="!search || searchName">
    <template v-if="elShow || searchName">
      <div class="info">
        <div class="name">
          <h3><i class="book-name" v-html="searchName || book.name"></i></h3>
          <div class="type">{{ book.typeName }}</div>
        </div>
        <div class="desc">{{ book.effect }}</div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    book: Object,
    search: String,
  },
  name: "BookItem",
  computed: {
    searchName() {
      if (this.search && this.search.trim()) {
        if (this.book.name.indexOf(this.search.trim()) !== -1) {
          var reg = new RegExp(this.search.trim(), "g");
          let name = this.book.name.replace(
            reg,
            "<b>" + this.search.trim() + "</b>"
          );
          return name;
        } else {
          return "";
        }
      } else {
        return "";
      }
    },
  },
  methods: {
    updateView() {
      if (!this.$el.getBoundingClientRect) return;
      let offsetTop = this.$el.getBoundingClientRect().top;
      if (offsetTop < this.viewHeight && offsetTop > -100) {
        this.elShow = true;
      } else {
        this.elShow = false;
      }
    },
  },
  data() {
    return {
      elShow: false,
    };
  },
  mounted() {
    this.updateView();
    this.event.on("handleScroll", this.updateView);
  },
  beforeDestroy() {
    this.event.remove("handleScroll", this.updateView);
  },
};
</script>

<style lang="scss" scoped>
.book-item {
  min-height: 0.64rem;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #ebebeb;
  margin-bottom: 0.09rem;
  display: flex;
  align-items: center;
  padding: 0 0.08rem;
  .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.08rem 0 0.08rem 0;
    .name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      h3 {
        margin: 0;
        width: 0.72rem;
        height: 0.24rem;
        background: #f2f2f2;
        border-radius: 4px;
        font-weight: 400;
        font-size: 0.14rem;
        display: flex;
        align-items: center;
        justify-content: center;
        .book-name {
          font-style: normal;
          ::v-deep {
            b {
              color: #f6a16e;
              font-weight: 400;
            }
          }
        }
      }
      .type {
        width: 0.48rem;
        height: 0.2rem;
        background: #ffffff;
        border-radius: 0.1rem;
        border: 1px solid #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.12rem;
      }
    }
    .desc {
      margin: 0.09rem 0.05rem 0;
      font-size: 0.12rem;
      font-weight: 400;
      color: #8c8c8c;
      line-height: 0.2rem;
      text-align: justify;
    }
  }
}
</style>
